<template>
  <div class="path-bar">
    <el-transfer
      v-model="selectValue.data"
      filterable
      :filter-method="filterMethod"
      :props="{ key: 'id', label: 'name' }"
      :data="table.data"
      :titles="['可选收费员', '已选收费员']"
      @change="rightChange"
    />
    <div class="footer">
      <div></div>
      <div class="search-btn">
        <el-button class="reset-btn" @click="resetForm()">取 消 </el-button>
        <el-button class="confirm-btn" @click="submitForm()">确 认 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps } from "vue";
import {
  getMebList,
  getBind,
} from "../request.js"

const emits = defineEmits(["operationDone"]);

const props = defineProps({
  operationId: {
    type: Object,
    default: () => {},
  },
});
const value = defineModel();
const selectValue = reactive({ data: [] });
selectValue.data = Array.isArray(value.value) ? value.value : [];

const table = reactive({
  data: [],
});

const getData = () => {
  getMebList(props.operationId.id).then((res) => {
    table.data = res.data.result;
    selectValue.data = table.data
      .filter((item) => item.bindState)
      .map((item) => item.id);
  });
};

getData();

const filterMethod = (query, item) => {
  return item.name.toLowerCase().includes(query.toLowerCase());
};

const resetForm = () => {
  selectValue.data = [];
  emits("operationDone");
};

const submitForm = async () => {
  console.log("selectValue.data ===>", selectValue.data);
  await getBind({
    target: "meb",
    teamId: props.operationId.id,
    data: selectValue.data,
  }).then((res) => {
    console.log("res ===>", res);
    if (res.data.code === 0) {
      ElMessage({
        type: "success",
        message: res.data.result,
      });
      emits("operationDone");
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
</script>

<style lang="less" scoped>
.path-bar {
  text-align: center;
}
.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

.search-btn {
  display: flex;
}

.reset-btn {
  width: 65px;
  height: 32px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}

.confirm-btn {
  width: 65px;
  height: 32px;
  background: #007aff;
  border-radius: 2px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}
</style>